<template>
  <div class="app-container">


    <el-dialog title="签到表：" :visible.sync="calendvisable">
      <el-calendar v-model="value">
        <template slot="dateCell" slot-scope="{ date ,data}">
          <div class="poR">
            {{ data.day  }}
            <!-- 遮罩层 -->
            <div v-for="(item, index) in qiandaolist" :key="index">
              <span v-if="item.signdatetime == data.day"> '✔️' </span>
            </div>
          </div>
        </template>
      </el-calendar>
    </el-dialog>

    <el-table
      :data="list"
      v-loading.body="listLoading"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="ID" width="95">
        <template slot-scope="scope">
          {{ scope.$index }}
        </template>
      </el-table-column>
      <el-table-column label="名称">
        <template slot-scope="scope">

          {{scope.row.name}}
        </template>
      </el-table-column>
      <el-table-column label="账户"  >
        <template slot-scope="scope">
          {{scope.row.account}}
        </template>
      </el-table-column>
      <el-table-column label="真实姓名"  >
        <template slot-scope="scope">
          {{scope.row.realname}}
        </template>
      </el-table-column>
      <el-table-column label="密码"  >
        <template slot-scope="scope">
         {{scope.row.password}}
        </template>
      </el-table-column>
      <el-table-column label="所属班级"  >
        <template slot-scope="scope">
          <span v-if="scope.row.classroom">
            {{scope.row.classroom.name}}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="状态"  >
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status == 0" type="success">可用</el-tag>
          <el-tag v-else type="danger">不可用</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="created_at"
        label="操作"
      >
        <template slot-scope="scope">
          <el-button  slot="reference" type="primary" @click="showcalend(scope.row.id)" size="mini"> 查看签到</el-button>
          <el-button v-if="scope.row.status == 0" type="danger" @click="disbale(scope.row)" size="mini">关闭使用</el-button>
          <el-button v-else type="success" @click="disbale(scope.row)" size="mini">开放使用</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="pager"
      background
      layout="prev, pager, next"
      :current-page="listQuery.currentpage"
      :page-size="listQuery.pagesize"
      @current-change="fetchData"
      :total="listQuery.total">
    </el-pagination>
  </div>
</template>

<script>
import { getStudentList,getStudengQiandao,updateStudent  } from "@/api/admin";

export default {
  data() {
    return {
      list: null,
      calendvisable:false,
      qiandaolist:[],
      listLoading: true,
      listQuery:{
        currentpage:1,
        pagesize:20,
        name:"",
        total:0,
      },
      value: new Date(), // 当前月份

      dateObj: {
        isDate: "",
        status: "" // 正常 加班 异常
      },
      calendarArr: [],
      calendarData: {
        status1: "",
        status2: "",
        status3: "",
        status4: "",
        status5: ""
      }
    };
  },
  created() {
    this.fetchData();
  },

  watch: {
    value: function() {

    }
  },
  methods: {
    disbale(e){
      if(e.status== 0 ){
        e.status = 1;
      }else{
        e.status = 0;
      }
      updateStudent(e).then(res=>{
        console.log(res)
      })
    },
    fetchData(e) {
      if(e != undefined) this.listQuery.currentpage = e;
      this.listLoading = true;
      getStudentList(this.listQuery).then((response) => {
        console.log("get list success")
        this.list = response.info;
        this.listQuery.currentpage = response.currentpage;
        this.listQuery.total = response.total;
        this.listQuery.totalpage = response.totalpage;
        this.listLoading = false;
      }).catch(err=>{
        this.listLoading = false;
      })
    },

    showcalend( sid ) {
      getStudengQiandao(sid).then(res=>{
        this.qiandaolist = res.info;
        this.qiandaolist.forEach(item =>{
          item = new Date(item.signdatetime)
        })
        this.calendvisable = true;
      })
    }
  },
};
</script>
<style>
.pager{
  float: right;
  margin: 30px;
}
</style>
